<template>
	<view style="background: #ffffff; 
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: -1;">
		<view class="notes">
			<p><span>*</span>工单详情</p>
		</view>
		<view class="uni-common-mt">
			<view class="uni-form-item uni-column user-input" >
				<view style="width: 80px; font-size: 16px; ">流水单号:</view>
				<view class="input">
					<view class="info">{{workOrderNumber2}}</view>
				</view>
			</view>
			<u-gap height="5px" bgColor="#ffffff "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view style="width: 80px; font-size: 16px; ">工单日期:</view>
				<view class="input">
					<text class="info">{{worktime}}</text>
				</view>
			</view>
			<u-gap height="5px" bgColor="#ffffff "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view style="width: 60px; font-size: 16px; ">序列号:</view>
				<view class="input">
					<view class="info">{{serialnumber}}</view>
				</view>
			</view>
			<u-gap height="5px" bgColor="#ffffff "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view class="title">设备类型:</view>
				<view class="input">
					<view class="info">{{devicetype}}</view>
				</view>
			</view>
			<u-gap height="5px" bgColor="#ffffff "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view style="width: 80px; font-size: 16px;">设备型号:</view>
				<view class="input">
					<view class="info">{{devicemodel}}</view>
				</view>
			</view>
			
			<u-gap height="5px" bgColor="#ffffff "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view style="width: 80px; font-size: 16px;">出厂时间:</view>
				<view class="input">
					<view class="info">{{deliverytime}}</view>
				</view>
			</view>
			<u-gap height="5px" bgColor="#ffffff "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view style="width: 80px; font-size: 16px;">生成组别:</view>
				<view class="input">
					<view class="info">{{productiongroup}}</view>
				</view>
			</view>
			<u-gap height="5px" bgColor="#ffffff "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view style="width: 80px; font-size: 16px;">客户名称:</view>
				<view class="input">
					<view class="info">{{customername}}</view>
				</view>
			</view>
			<u-gap height="5px" bgColor="#ffffff "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view style="width: 90px; font-size: 16px;">生产负责人:</view>
				<view class="input">
					<view class="info">{{productionleader}}</view>
				</view>
			</view>
			<u-gap height="5px" bgColor="#ffffff "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view style="width: 90px; font-size: 16px;">客户联系人:</view>
				<view class="input">
					<view class="info">{{contacts}}</view>
				</view>
			</view>
			<u-gap height="5px" bgColor="#ffffff "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view style="width: 80px; font-size: 16px;">客户电话:</view>
				<view class="input">
					<view class="info">{{customerphone}}</view>
				</view>
			</view>
			<!-- 故障图片   -->
			<u-gap height="5px" bgColor="#ffffff "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view style="width: 80px; font-size: 16px;">故障图片:</view>
				<view style="margin-left: 10%; "> 
					<!-- <image :src="detailspath" style="width: 60px; height: 60px;" 
					@click="getImgIndex" ></image> -->
					<image src="../../static/showImg.png" style="width: 80px; height: 80px;" @click="faultImg"></image>
				</view>	
			</view>
			<u-gap height="5px" bgColor="#ffffff "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view style="width: 80px; font-size: 16px;">问题描述:</view>
				<view class="input">
					<view class="info">{{problemdescription}}</view>
				</view>
			</view>
			<u-gap height="5px" bgColor="#ffffff "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view style="width: 80px; font-size: 16px;">工单状态:</view>
				<view class="input">
					<view class="info">{{status}}</view>
				</view>
			</view>
			<u-gap height="5px" bgColor="#ffffff "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view style="width: 80px; font-size: 16px;">完成日期:</view>
				<view class="input">
					<view class="info">{{workendtime}}</view>
				</view>
			</view>
			<u-gap height="5px" bgColor="#ffffff "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view style="width: 80px; font-size: 16px;">备注:</view>
				<view class="input">
					<view class="info">{{remark}}</view>
				</view>
			</view>
			<u-gap height="5px" bgColor="#ffffff "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view style="width: 80px; font-size: 16px;">派遣人员:</view>
				<view class="input">
					<view class="info">{{dispatchedPersonnel2}}</view>
				</view>
			</view>
			<u-gap height="5px" bgColor="#ffffff "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view style="width: 100px; font-size: 16px;">售后确认单:</view>
				<view class="input">
					<image src="../../static/showImg.png" style="width: 80px; height: 80px;" @click="getImgIndex"></image>
				</view>
			</view>
			<u-gap height="5px" bgColor="#ffffff "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view style="width: 80px; font-size: 16px;">售后8D单:</view>
				<view class="input">
					<image src="../../static/showImg.png" style="width: 80px; height: 80px;" @click="getImgIndex8D"></image>
				</view>
			</view>
			<u-gap height="5px" bgColor="#ffffff "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view style="width: 80px; font-size: 16px;">处置方案:</view>
				<view class="input">
					<!-- <view class="info">{{disposalPlan}}</view> -->
					<text v-if="!disposalPlan" @click="showPlan = true" style="width: 200px;">请选择处置方案</text>
					<text v-else style="width: 200px; font-size: 16px; color:#aaaaaa;">{{disposalPlan}}</text>
					<u-picker :show="showPlan" :columns="columnsPlan" @confirm = "confirmPlan" closeOnClickOverlay
					@cancel="showPlan = false" @close="showPlan=false"></u-picker>
				</view>
			</view>
			
			<u-gap height="5px" bgColor="#ffffff "></u-gap>
			<view class="notes" v-if="showBt">
				<p><span>*</span>下推：</p>
			</view>
			<!--   多选 下拉框  -->
			<view class="form" v-if="showBt">
				<view class="item">
					<!-- 下拉框多选 -->
					<view :class="['select', form.selectValue ? 'selected' : '']" @tap="handleMultiple(form.selectIndex)">
						{{form.selectValue || '请选择下推人员'}}
					</view>
				</view>
			</view>
			<multiple-picker 
				title="请选择下推人员" 
				:show="selectMultiple.show" 
				:columns="selectMultiple.columns" 
				:defaultIndex="selectMultiple.index" 
				@confirm="confirmMultiple" 
				@cancel="selectMultiple.show = false"
				@change="changeMultiple"
			></multiple-picker>
			
		</view>
		<button class="up-button" @click="upInfo" v-if="showBt">下推</button> 
		<u-gap height="20px" bgColor="#ffffff "></u-gap>
	</view>
</template>

<script>
	let workid;
	export default {
		data() {
			return {
				showBt: false,
				
				showPlan: false,
				columnsPlan:[['派工','派物料','派工+派物料','远程指导']],
				//  多选 下拉框  
				form: {
					selectValue: '',
					selectIndex: [],
				},
				selectMultiple: {
					show: false,
					index: [],
					columns: [],
				},
				// img: 'https://bhimgs.com/i/2023/08/04/o3kxnf.jpg',
				workid: '',      //售后工单 id
				worktime: '',    // 工单日期
				workOrderNumber2: '',
				serialnumber: '',  // 序列号 
				devicetype: '',   //  设备类型  
				devicemodel: '',   // 设备型号 
				deliverytime: '',  //  出厂时间 
				productiongroup: '',  // 生产组别
				customername: '',    // 客户名称 
				productionleader: '',  // 生产负责人
				contacts: '',    // 客户联系人 
				customerphone: '',    //客户 电话
				detailspath: '',     // 故障图片    
				problemdescription: '',   // 问题描述 
				status: '',            //工单状态  
				workendtime: '',      //  完成日期
				remark: '',      // 备注 
				dispatchedPersonnel: '',//  派遣人员
				dispatchedPersonnel2: '',
				confirmationForm: '',  		// 售后确认单
				disposalPlan: '',			// 处置方案
				afterSales8DForm: '',       // 售后 8D 单
				
				imgList:[],
				imgList8D:[],
				faultImgList: [],
			};
		},
		onLoad(option) {
			workid = JSON.parse(decodeURIComponent(option.data))
			//  根据  工单流水号 查找信息
			uni.request({
				url: 'https://www.smacaftersales.com:443/workOrder/workOrder/findOrderByWorkid',
				method: 'GET',
				data:{
					workid: workid.msg
				},
				header: {
					"Content-Type": "application/json" //请求头信息
				},
				success: (res) => { 		//如果访问接口成功就会进入success
					const data = res.data.data[0].confirmationForm 
					//  售后 确认单多图
					if(data != null && data != ''){
						const urls = data.split(",");
						for (var i = 0; i < urls.length-1; i++) {
							console.log(urls[i])
							this.imgList.push(urls[i])
						}
					}else{
						this.imgList.push("http://121.5.128.59:9000/picture/dbd2716b13b54127851148fcdda7d4d7.jpg")
					}
					//  8 D 单多图
					const data2 = res.data.data[0].afterSales8DForm
					if (data2 != null && data2 != '') {
						const urls2 = data2.split(",");
						for (var i = 0; i < urls2.length-1; i++) {
							this.imgList8D.push(urls2[i])    
						}
					}else{
						this.imgList8D.push("http://121.5.128.59:9000/picture/dbd2716b13b54127851148fcdda7d4d7.jpg")
					}
					//   故障图  
					const faultData = res.data.data[0].detailspath
					console.log(faultData,"---- faultdata  ------")
					if (faultData != null && faultData != '') {
						const faultUrls = faultData.split(",");
						for (var i = 0; i < faultUrls.length-1; i++) {
							this.faultImgList.push(faultUrls[i]) 
						}
					}else{
						this.faultImgList.push("http://121.5.128.59:9000/picture/dbd2716b13b54127851148fcdda7d4d7.jpg")
					}
					this.dispatchedPersonnel2 = res.data.data[0].dispatchedPersonnel
					this.disposalPlan = res.data.data[0].disposalPlan
					this.worktime = res.data.data[0].worktime
					this.serialnumber = res.data.data[0].serialnumber
					this.devicetype = res.data.data[0].devicetype
					this.devicemodel = res.data.data[0].devicemodel
					this.deliverytime = res.data.data[0].deliverytime
					this.productiongroup = res.data.data[0].productiongroup
					this.customername = res.data.data[0].customername
					this.productionleader = res.data.data[0].productionleader
					this.contacts = res.data.data[0].contacts
					this.customerphone = res.data.data[0].customerphone
					this.detailspath = res.data.data[0].detailspath
					this.problemdescription = res.data.data[0].problemdescription
					this.status = res.data.data[0].status
					this.workendtime = res.data.data[0].workendtime
					this.remark = res.data.data[0].remark
					this.workid = res.data.data[0].workid
					this.workOrderNumber2 = res.data.data[0].workordernumber
					if (this.dispatchedPersonnel2 == '' || this.dispatchedPersonnel2 == null ) {
						this.showBt = true
					}
					
				},
				fail:()=>{ //如果访问接口失败就会进入fail
					console.log("------失败")
				}
			}),
			//  查询 售后人员
			uni.request({
				url: 'https://www.smacaftersales.com:443/workOrder/workOrder/findAfterSales',
				method: 'GET',
				header: {
					"Content-Type": "application/json" //请求头信息
				},
				success: (res) => {
					// console.log("*** 售后人员信息 *******",res.data.data)
					for (var i = 0; i < res.data.data.length; i++) {
						let list = {
							label: res.data.data[i],
							value: i+1
						}
						
						this.selectMultiple.columns.push(list)
					}
				},
				fail: () => {
					console.log("---- 失败 --------")
				}
			})
		},
		
		onShow() {	
		},
		onUnload() {
			uni.switchTab({
				url: '/pages/adminVue/orderView'
			})
		},
		
		methods: {
			confirmPlan(e){
				this.showPlan = false
				this.disposalPlan = e.value[0]
				console.log("-----选择处置方案-----",e.value[0])
			},
			
			
			//  下拉 多选框
			handleMultiple(val) {   //打开选框
				console.log(val);
				this.selectMultiple.index = val || [];
				this.selectMultiple.show = true;
			},
			confirmMultiple(e) {  //确认
				console.log(e);
				let temp = [];
				e.selected.forEach(item => {
					temp.push(item.label);
				})
				this.form.selectValue = temp.toString();
				this.form.selectIndex = e.value;
				this.selectMultiple.show = false;
				this.dispatchedPersonnel = this.form.selectValue
			},
			changeMultiple(e) {
				console.log(e);
			},
			// 图片 预览
			getImgIndex(){
				
				uni.previewImage({
					urls: this.imgList,
					current:0  ,//点击图片传过来的下标	
				})
			},
			getImgIndex8D(){   // 8D单
				uni.previewImage({
					urls: this.imgList8D,
					current:0  ,//点击图片传过来的下标	
				})
			},
			faultImg(){
				uni.previewImage({
					urls: this.faultImgList,
					current:0  ,//点击图片传过来的下标	
				})
			},
			// 下拉框 
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
			bindPickerChange2: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
			upInfo() {
				
				if (this.dispatchedPersonnel == '' || this.dispatchedPersonnel == null ||
					this.disposalPlan == '' || this.disposalPlan == null) {
					uni.showToast({
						title:'下推内容为空',
						icon:'error'
					})
				} else{
					uni.request({
					url: 'https://www.smacaftersales.com:443/workOrder/workOrder/updateDispatchedPersonnel',
					method: 'GET',
					data:{
						dispatchedPersonnel: this.dispatchedPersonnel,
						workid: this.workid,
						disposalPlan: this.disposalPlan
					},
					success: (res) => {
						console.log("*** 售后人员信息 *******",res.data.code)
						this.showBt = false
						this.dispatchedPersonnel2 = this.dispatchedPersonnel
						if(res.data.code = 200){
							uni.showToast({
								title: "派遣下推人员成功",
								duration:2000,
								icon: 'success'
							})
						}
					},
					fail: () => {
						console.log("---- 失败 --------")
						uni.showToast({
							title: '派遣失败，联系管理员',
							duration: 2000,
							icon: 'none'
						})
					}
					
				})
				}
				
				
				
				
				
				
			},
			
		
		}
	}
</script>

<style scoped lang="scss">
	
	 page {
	        background-color: #ffffff;
	    }
	    .form {
	        width: 100%;
	        padding: 10rpx 30rpx;
	        box-sizing: border-box;
	 
	        .item {
	            width: 100%;
	            padding: 20rpx 0;
	 
	            .select {
	                width: 100%;
	                border: 1px solid #dadbde;
	                padding-top: 6px;
	                padding-bottom: 6px;
	                padding-left: 9px;
	                padding-right: 9px;
	                border-radius: 4px;
	                font-size: 15px;
	                box-sizing: border-box;
	                color: #CCCCCC;
	                line-height: 26px;
	 
	                &.selected {
	                    color: black;
	                }
	            }
	        }
	    }
	
	
	
	
	.uni-input{
		height: 35px;
		border-radius: 5px;
		background: #f5f5f5;
	}
	.title{
		width: 80px;
		height: 20px;
		font-size: 16px;
	}
	.user-input{
		width: 390px;
		margin: 8px 10px;
		display: flex;
		.input{
			width: 260px;
			margin-left: 10px;
		}
	}

	.fenjie{
		width: 390px;
		height: 1px;
		background: #ddd;
		margin: 0 auto;
	}

	.up-button{
		width: 160px;
		height:40px;
		background: #488ac7;
		border-radius: 4px;
		font-size: 16px;
		line-height: 40px;
		color: white;
		margin-top: 30px;
	}

	.notes{
		width: 335px;
		margin: 0px auto 8px;
		font-size: 16px;
		
		span{
			color: red;
			margin-right: 4px;
		}
		p{
			color: #999;
		}
	}
	.info{
		font-size: 17px;
		color: #aaaaaa;
	}
</style>
